<script setup>

import { ref } from "vue";
import { onMounted } from "vue";
import {ElMessage} from "element-plus"
import {axiosInstance} from "@/assets/js/axios-utils.js";

const tableData = ref([])
const infoShow = ref(false)
const infoForm = ref({})



const pageNum = ref(1);
const pageSize= ref(5)
let total = ref(0)
const listStudent = () => {

    axiosInstance.post("/student/list",{pageNum:pageNum.value,pageSize:pageSize.value,params:searchForm.value})
        .then((response) => {

            tableData.value = response.data.list;
            total.value = parseInt(response.data.total)

        }).catch((error) => {
        ElMessage.error(error.message)
    })
}
const changePage = (cp)=>{
    pageNum.value = cp
    listStudent()
}

const remove = (id) => {
    if (! id) {
        return;
    }
    axiosInstance.post("/student/remove", {id: id}).then(response => {
        listStudent()
    }).catch(error => {
        ElMessage.error("删除失败")
    })
}

const openInfo = (row) => {
    infoShow.value = true
    infoForm.value = {}
    if (row.id){
        info(row.id)
    }
}
const info = (id)=>{
    axiosInstance.post("/student/info",{id:id}).then(res=>{
        infoForm.value = res.data
    }).catch(err=>{
        ElMessage.error("详情获取失败");
    })
}
const closeInfo = () => {
    infoShow.value = false
}

const saveInfo = () => {
    console.log(infoForm.value)
    if(! infoForm.value.sname?.trim()) {
        ElMessage.error("学生姓名不能为空")
        return;
    }
    if(! infoForm.value.age) {
        ElMessage.error("学生年龄不能为空")
        return;
    }
    if(! infoForm.value.gender) {
        ElMessage.error("学生性别不能为空")
        return;
    }
    axiosInstance.post("/student/save", infoForm.value)
        .then((response) => {
            closeInfo();
            listStudent();
        }).catch((error) => {
        ElMessage.error("学生信息添加失败")
    })
}

const searchForm = ref({})
const search = ()=>{
    pageNum.value = 1;
    listStudent()
}
onMounted(() => {
    listStudent()
})

</script>

<template>
    <div>
        <div>
            <el-form :inline="true"  :model="searchForm">
                <el-form-item label="姓名">
                    <el-input  placeholder="姓名" clearable  v-model="searchForm.sname"/>
                </el-form-item>
                <el-form-item label="性别" >
                    <el-select v-model="searchForm.gender" placeholder="请选择性别" style="width: 100px">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">检索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="primary" @click="openInfo">添加</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="sname" label="姓名" ></el-table-column>
                <el-table-column prop="age" label="年龄" ></el-table-column>
                <el-table-column prop="gender" label="性别" >
                    <template #default="props">
                        <span v-if="props.row.gender===1">男</span>
                        <span v-if="props.row.gender===2">女</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" ></el-table-column>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="props">
                        <el-button type="danger" size="small" @click="remove(props.row.id)">
                            删除
                        </el-button>
                        <el-button type="primary" size="small" @click="openInfo(props.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--            分页组件-->
            <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @change="changePage"/>
        </div>

        <div>
            <el-dialog v-model="infoShow" title="新增学生" width="500" :close-on-click-modal="false">
                <el-form :model="infoForm">
                    <el-form-item label="学生姓名">
                        <el-input v-model="infoForm.sname" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="学生年龄">
                        <el-input v-model="infoForm.age" autocomplete="off" type="number" min="1" />
                    </el-form-item>
                    <el-form-item label="学生性别">
                        <el-select v-model="infoForm.gender" placeholder="请选择性别" >
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学生住址">
                        <el-input v-model="infoForm.address" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="closeInfo">取消</el-button>
                        <el-button type="primary" @click="saveInfo">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>

</template>

<style scoped>


</style>